<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js 方块地球</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 场景
        const scene = new THREE.Scene();

        // 相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;

        // 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 立方体几何
        const geometry = new THREE.BoxGeometry(1, 1, 1);

        // 加载纹理
        const textureLoader = new THREE.TextureLoader();
        const texture = textureLoader.load('earth.jpg'); // 请将 earth.jpg 替换为地球纹理的图片地址

        // 材质
        const material = new THREE.MeshBasicMaterial({ map: texture });

        // 立方体网格
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 动画函数
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }

        // 调用动画函数
        animate();
    </script>
</body>
</html>